<template>
  <div>
    <vue-ueditor-wrap
      v-model="contents"
      :config="myConfig"
      :destroy="destroy"
      @ready="ready"
      @beforeInit="addCustomDialog"
    />
    <!-- @beforeInit="addCustomButtom" -->
    <el-dialog
      title="上传图片"
      :visible.sync="dialogVisible"
      width="550px"
      :show-close="true"
      :close-on-click-modal="false"
      top="10%"
      class="my-dialog"
    >
      <el-upload
        class="upload-demo"
        :action="serverUrl"
        :on-remove="handleRemove"
        :file-list="fileList"
        :on-success="handleSuccess"
        list-type="picture"
      >
        <el-button size="small" type="primary" style="margin-left: 10px;">点击上传</el-button>
      </el-upload>
      <el-button size="small" type="success" @click="yes(editor)">确定上传</el-button>
    </el-dialog>
  </div>
</template>

<script>
import VueUeditorWrap from 'vue-ueditor-wrap'

export default {
  components: {
    VueUeditorWrap
  },
  props: {
    content: {
      type: String,
      default: ''
    },
    height: {
      type: Number,
      default: 450
    },
    width: {
      type: String,
      default: '100%'
    },
    autoHeight: {
      type: Boolean,
      default: false
    },
    serverUrl: {
      type: String,
      default: ''
    },
    destroy: { // 销毁
      type: Boolean,
      default: true
    },
    extentPlug: {
      type: Array,
      default() {
        return ['music']
      }
    }
  },
  data() {
    return {
      editor: null,
      dialogVisible: false,
      contents: '',
      myConfig: {
        autoHeightEnabled: this.autoHeight,
        initialFrameHeight: this.height,
        initialFrameWidth: this.width,
        serverUrl: this.serverUrl ? this.serverUrl : `${process.env.VUE_APP_BASE_API}/qiniu/upload_ueditor`
      },
      fileList: []
    }
  },
  created() {
    this.contents = this.content
  },
  methods: {
    ready(editorInstance) {
      this.editor = editorInstance
    },
    yes(editor) {
      let url = ''
      this.fileList.forEach(element => {
        url += `<img src="${element.url}" alt="${element.name}"/>`
      })
      editor.execCommand('inserthtml', url)
      this.dialogVisible = false
    },
    handleRemove(file) {
      const pic_id = file.response ? file.response.data.pic_id : file.name
      const detail_pic = this.fileList
      this.fileList = []
      for (const item of detail_pic) {
        if (Number(item) !== Number(pic_id)) {
          this.fileList.push(item)
        }
      }
    },
    handleSuccess(res, file) {
      this.fileList.push({
        name: res.data.pic_id,
        url: res.data.pic_image
      })
    },
    addCustomDialog(editorId) {
      window.UE.registerUI(this.extentPlug.join(' '), function(editor, uiName) {
        switch (uiName) {
          case 'music':
            var dialog = new window.UE.ui.Dialog({
              // 指定弹出层中页面的路径，这里只能支持页面，路径参考常见问题 2
              iframeUrl: '/static/UEditor/dialogs/music1/music.html',
              // 需要指定当前的编辑器实例
              editor: editor,
              // 指定 dialog 的名字
              name: uiName,
              // dialog 的标题
              title: '上传音乐',
              // 指定 dialog 的外围样式
              cssRules: 'width:720px;height:350px;',
              // 如果给出了 buttons 就代表 dialog 有确定和取消
              buttons: [
                {
                  className: 'edui-okbutton',
                  label: '确定',
                  onclick: function() {
                    dialog.close(true)
                  }
                },
                {
                  className: 'edui-cancelbutton',
                  label: '取消',
                  onclick: function() {
                    dialog.close(false)
                  }
                }
              ]
            })
            // 参考上面的自定义按钮
            var btn = new window.UE.ui.Button({
              name: 'music-button',
              title: '音乐',
              cssRules: `background-image: url('/static/UEditor/themes/default/images/music.png') !important;background-size: cover;`,
              onclick: function() {
                // 渲染dialog
                dialog.render()
                dialog.open()
              }
            })
            return btn
          case 'markdown':
            var dialog1 = new window.UE.ui.Dialog({
              // 指定弹出层中页面的路径，这里只能支持页面，路径参考常见问题 2
              iframeUrl: '/static/UEditor/dialogs/markdown/markdown.html',
              editor: editor,
              name: 'my' + uiName,
              title: '转换Markdown',
              cssRules: 'width:720px;height:350px;',
              buttons: [
                {
                  className: 'edui-okbutton',
                  label: '确定',
                  onclick: function() {
                    dialog1.close(true)
                  }
                },
                {
                  className: 'edui-cancelbutton',
                  label: '取消',
                  onclick: function() {
                    dialog1.close(false)
                  }
                }
              ]
            })
            // 参考上面的自定义按钮
            var btn1 = new window.UE.ui.Button({
              name: 'markdown',
              title: '将Html转成Markdown',
              cssRules: `background-image: url('../../themes/default/images/markdown.png') !important;background-size: cover;`,
              onclick: function() {
                // 渲染dialog
                dialog1.render()
                dialog1.open()
              }
            })
            return btn1
          default:
            return
        }
      },
      [62],
      editorId)
    }
  }
}
</script>
